<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="手机号">
        <el-input v-model="searchObj.mobile" placeholder="手机号" />
      </el-form-item>

      <el-form-item label="用户类型">
        <el-select v-model="searchObj.userType" placeholder="请选择" clearable>
          <el-option label="投资人" value="1" />
          <el-option label="借款人" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="用户状态">
        <el-select v-model="searchObj.status" placeholder="请选择" clearable>
          <el-option label="正常" value="1" />
          <el-option label="锁定" value="0" />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="initData()">
        查询
      </el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table :data="list" border stripe>
      <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="用户类型" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType === 1" type="success" size="mini">
            投资人
          </el-tag>
          <el-tag
            v-else-if="scope.row.userType === 2"
            type="warning"
            size="mini"
          >
            借款人
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="name" label="用户姓名" />
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="integral" label="用户积分" />
      <el-table-column prop="createTime" label="注册时间" width="100" />
      <el-table-column label="绑定状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bindStatus === 0" type="warning" size="mini">
            未绑定
          </el-tag>
          <el-tag
            v-else-if="scope.row.bindStatus === 1"
            type="success"
            size="mini"
          >
            已绑定
          </el-tag>
          <el-tag v-else type="danger" size="mini">绑定失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册类型" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.openid" type="danger" size="mini">
            微信用户
          </el-tag>
          <el-tag v-else type="success" size="mini"> 平台用户 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger" size="mini">
            锁定
          </el-tag>
          <el-tag v-else type="success" size="mini"> 正常 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 1"
            type="primary"
            size="mini"
            @click="lock(scope.row.id, 0)"
          >
            锁定
          </el-button>
          <el-button
            v-else
            type="danger"
            size="mini"
            @click="lock(scope.row.id, 1)"
          >
            解锁
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="showLogsDialog(scope.row.id)"
          >
            显示登录日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      :page-sizes="[3, 5, 7, 10, 20]"
      style="padding: 30px 0"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />

    <el-dialog title="用户登录日志" :visible.sync="dialogTableVisible">
      <el-table :data="logs">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column property="ip" label="IP"></el-table-column>
        <el-table-column
          property="createTime"
          label="登录时间"
        ></el-table-column>
        <el-table-column property="loginType" label="登录方式">
          <template slot-scope="scope">
            <el-tag>{{
              scope.row.loginType === 1 ? "账号登录" : "微信登录"
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import userinfoApi from "@/api/userinfo";
export default {
  data() {
    return {
      logs: [], //登录日志集合
      dialogTableVisible: false,
      searchObj: {},
      list: [],
      pageNum: 1,
      total: 0,
      pageSize: 3,
    };
  },
  //当前前端项目全部都是客户端渲染
  //nuxt项目 服务端渲染  created在前端服务器中执行 如果代码用到了浏览器的api则会报错
  created() {
    this.initData();
  },
  methods: {
    //锁定解锁
    lock(userId, status) {
      userinfoApi.updateStatus(userId, status).then((r) => {
        this.$message.success(r.message);
        this.initData();
      });
    },
    //显示日志
    showLogsDialog(userId) {
      //查询userId的登录日志 设置到对话框中回显
      userinfoApi.loginRecords(userId).then((r) => {
        console.log(r.data.items);
        this.logs = r.data.items;
        //显示对话框
        this.dialogTableVisible = true;
      });
    },
    resetData() {
      this.searchObj = {};
      this.pageNum = 1;
      this.pageSize = 3;
      this.initData();
    },
    //加载第一页用户列表
    initData() {
      userinfoApi
        .list(this.searchObj, this.pageNum, this.pageSize)
        .then((r) => {
          //request.js中axios响应拦截器 拦截后返回的是响应体r对象
          this.list = r.data.page.records;
          this.total = Number(r.data.page.total);
        });
    },
    changePageSize(size) {
      this.pageSize = size;
      this.initData();
    },
    changeCurrentPage(num) {
      this.pageNum = num;
      this.initData();
    },
  },
};
</script>
